<template>
	<div>
		<cl-crud @load="onLoad">
			<template #table-column-money="{scope}">
				<el-tag> ￥{{ scope.row.money }} </el-tag>
			</template>

			<template #table-column-expire="{scope}">
				<span> {{ scope.row.expire }}天 </span>
			</template>

			<template #table-column-conditions="{scope}">
				<span type="success"> 满{{ scope.row.conditions }}元 </span>
			</template>

			<template #table-column-status="{scope}">
				<el-tag v-if="scope.row.status == 0">禁用</el-tag>
				<el-tag type="success" v-else-if="scope.row.status == 1">启用</el-tag>
			</template>
		</cl-crud>
	</div>
</template>

<script>
import platform from '@/mixin/platform';

export default {
	data() {
		return {
			crud: null,
			options: []
		};
	},
	mixins: [platform],
	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.integralMall.scoreMoneyList)
				.set('dict', {
					label: {
						add: '添加红包'
					}
				})
				.set('table', {
					columns: [
						{
							label: '序号',
							type: 'index',
							align: 'center',
							width: 60
						},
						{
							label: '红包金额',
							prop: 'money',
							align: 'center'
						},
						{
							label: '积分值',
							prop: 'score',
							align: 'center'
						},
						{
							label: '有效期',
							prop: 'expire',
							align: 'center'
						},
						{
							label: '使用条件',
							prop: 'conditions',
							align: 'center'
						},
						{
							label: '备注',
							prop: 'remark',
							align: 'center',
							emptyText: '无'
						},
						{
							label: '状态',
							prop: 'status',
							align: 'center'
						}
					],

					op: {
						layout: ['edit', 'delete']
					}
				})
				.set('upsert', {
					props: {
						width: '520px',
						labelWidth: '110px',
						center: true,
						'custom-class': 'custom-class-dialog-mini'
					},
					items: [
						{
							label: '红包金额',
							prop: 'money',
							span: 13,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入金额',
									type: 'number'
								}
							},
							rules: {
								required: true,
								message: '请输入金额'
							}
						},
						{
							label: '积分值',
							prop: 'score',
							span: 13,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入积分值',
									type: 'number'
								}
							},
							rules: {
								required: true,
								message: '请输入积分值'
							}
						},
						{
							label: '有效期',
							prop: 'expire',
							span: 13,
							value: 30,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '天',
									type: 'number'
								}
							},
							rules: {
								required: true,
								message: '请输入有效期'
							}
						},
						{
							label: '使用需满',
							prop: 'conditions',
							span: 13,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '元'
								}
							},
							rules: {
								required: true,
								message: '请输入使用条件'
							}
						},
						{
							label: '备注',
							prop: 'remark',
							span: 20,
							value: '积分兑换红包',
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入备注'
								}
							}
						},
						{
							label: '状态',
							prop: 'status',
							value: 1,
							component: {
								name: 'el-radio-group',

								options: [
									{
										label: '启用',
										value: 1
									},
									{
										label: '禁用',
										value: 0
									}
								]
							}
						}
					]
				})
				.set('layout', [
					['refresh-btn', 'add-btn', 'query', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.done();

			app.refresh();
		}
	}
};
</script>
